<template>
  <el-dialog
    v-model="dialogVisible"
    :title="$t('formgen.tinymce.popupTitle')"
    width="40%"
    append-to-body
    v-if="dialogVisible"
    destroy-on-close
  >
    <div v-if="popupList.length > 0">
      <el-text class="mt20 mr10">{{ $t("formgen.tinymce.updateText") }}</el-text>
      <el-select-v2
        :options="popupList"
        v-model="editPopupId"
        @change="handleEditPopupIdChange"
      />
    </div>
    <Tinymce
      class="mt10"
      v-model:value="inputValue"
      v-bind="$attrs"
      @change="handleInputValueChange"
    ></Tinymce>
    <el-text class="mt20">{{ $t("formgen.tinymce.detailText") }}</el-text>
    <div class="desc-text">{{ $t("formgen.tinymce.popupTips") }}</div>
    <el-input v-model="btnText"></el-input>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">
          {{ $t("common.cancel") }}
        </el-button>
        <el-button
          type="primary"
          @click="handleSubmit"
        >
          {{ $t("common.enter") }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Tinymce from "@/views/formgen/components/tinymce/index.vue";
import { generateId } from "@/utils";

const props = defineProps({
  value: {
    type: String,
    default: ""
  }
});

const inputValue = ref("");

const emit = defineEmits(["insert", "set"]);

const handleInputValueChange = (val: string) => {
  inputValue.value = val;
};

const handleEditPopupIdChange = (val: any) => {
  const popup = popupList.value.find(item => item.value === val);
  inputValue.value = popup?.html;
  btnText.value = popup?.label;
};

const editPopupId = ref("");

const id = generateId("");

const parser = new DOMParser();

const handleSubmit = () => {
  const contentHtml = `<div class='tinymce-popup tinymce-popup-${id}'>
    <div class='tinymce-popup-body'>
      ${inputValue.value}
    </div>`;
  const text = `<formpopup class="tinymce-popup-btn"  contenteditable="false"  id="tinymce-target-${id}" phtml="${encodeURIComponent(
    contentHtml
  )}">${btnText.value}</formpopup>`;
  if (editPopupId.value) {
    const htmlDoc = parser.parseFromString(props.value, "text/html");
    const selectEl = htmlDoc.getElementById(editPopupId.value);
    selectEl!.innerText = btnText.value;
    selectEl!.setAttribute("phtml", encodeURIComponent(contentHtml));
    emit("set", htmlDoc.body.innerHTML);
  } else {
    emit("insert", text);
  }
  dialogVisible.value = false;
};
const dialogVisible = ref(false);

const popupList = ref<any[]>([]);

const showDialog = () => {
  popupList.value = [];
  const htmlDoc = parser.parseFromString(props.value, "text/html");
  htmlDoc.body.querySelectorAll(".tinymce-popup-btn").forEach((el: Element) => {
    if (!el.id) {
      return;
    }
    const phtml = parser.parseFromString(decodeURIComponent(el.getAttribute("phtml") as string), "text/html");
    popupList.value.push({
      label: (el as HTMLElement).innerText,
      value: el.id,
      html: phtml?.querySelector(".tinymce-popup-body")?.innerHTML
    });
  });
  inputValue.value = "";
  editPopupId.value = "";
  btnText.value = "查看详情";
  dialogVisible.value = true;
};

const btnText = ref("查看详情");

defineExpose({
  showDialog
});
</script>

<style scoped lang="scss"></style>
